<template>
  <view class="content">
    <view class="tops">
	  <up-icon name="setting-fill" size="22" class="setIcon" @click="setFun"></up-icon>
      <view class="infos">
        <image
          src="https://img1.baidu.com/it/u=1665929857,2089570148&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889"
          mode="aspectFill"></image>
        <view class="names">
          韩信
        </view>
        <view class="desc">
          纵情山河万里，肆意九州五岳，爱恨痴狂，抵不过沧海一笑
        </view>
        <view class="t-list">
          <view class="t-item">
            <view class="tit">
              收藏
            </view>
            <view class="vals">
              45
            </view>
          </view>
          <view class="t-item">
            <view class="tit">
              点赞
            </view>
            <view class="vals">
              266
            </view>
          </view>
          <view class="t-item">
            <view class="tit">
              分享
            </view>
            <view class="vals">
              103
            </view>
          </view>
        </view>
      </view>

    </view>

    <view class="lists">
	  <up-cell-group>
	  	<up-cell icon="account" title="个人信息" :isLink="true" arrow-direction="left" value="其他信息" @click="clickList"></up-cell>
	  	<up-cell icon="shopping-cart" title="我的购物车" :isLink="true" arrow-direction="left" @click="clickList"></up-cell>
		<up-cell icon="file-text" title="用户反馈" :isLink="true" arrow-direction="left" value="其他信息" @click="clickList"></up-cell>
		<up-cell icon="email" title="我的邮件" :isLink="true" arrow-direction="left" @click="clickList"></up-cell>
		<up-cell icon="share" title="分享有礼" :isLink="true" arrow-direction="left" @click="clickList"></up-cell>
	  </up-cell-group>
    </view>
	<view class="version-number">
		版本4.1.2
	</view>
  </view>
</template>

<script setup>
  const setFun =()=> {
    uni.showToast({
      title: "点击设置",
      icon: "none"
    })
  }
  const clickList =()=> {
    uni.showToast({
      title: "点击列表",
      icon: "none"
    })
  }
</script>

<style lang="scss" scoped>
	@import '~@/pages/mine/mine.scss';
</style>
<style scoped>
  .tops {
    position: relative;
    height: 580rpx;
    background-color: aquamarine;
    background: url("https://img1.baidu.com/it/u=3643237076,897388802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400") no-repeat;
    background-size: 100% 100%;
  }

  .setIcon {
    position: absolute;
    top: 50rpx;
    right: 50rpx;
  }

  .lists {
    padding: 20rpx;
  }

  .tops .infos {
    width: 80%;
    height: 450rpx;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -25%);
    text-align: center;
  }

  .infos image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
  }

  .infos .names {
    font-size: 34rpx;
    color: #333;
    font-weight: 700;
    margin: 20rpx 0 10rpx;
  }

  .infos .desc {
    max-width: 62%;
    font-size: 28rpx;
    color: #333;
    margin: 10rpx auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .infos .t-list {
    margin-top: 60rpx;
    display: flex;
    justify-content: space-around;
  }

  .t-item .tit {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 10rpx;
  }

  .t-item .vals {
    font-size: 36rpx;
    color: #333;
    font-weight: 700;
    margin-bottom: 10rpx;
  }

  /deep/.uni-list-item__content-title[data-v-296a3d7e] {
    font-size: 30rpx;
    color: #333;
    overflow: hidden;
    font-weight: 500;
  }

  /deep/.uni-list-item__container {
    padding: 30rpx;
  }
</style>